import 'package:flutter/material.dart';

import '../../../util.dart';
import '../index.dart';

class VersionNewWidget extends GetView<VersionUpdateViewController> {
  const VersionNewWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    double radio = 550 / 614;
    var w = 1.sw - 100.r;
    var h = w / radio;
    double w_radio = w / 550;
    double h_radio = h / 614;
    var state = controller.state;
    var md = state.md;
    return Stack(
      children: [
        Image.asset(
          'version_new.png'.imgPathVersion,
          fit: BoxFit.contain,
        ),
        Positioned(
          top: 280 * h_radio,
          left: 20.r,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '更新内容',
                style: TextStyle(
                  color: const Color(0xff333333),
                  fontSize: 17.sp,
                  fontWeight: FontWeight.bold,
                ),
              ),
              Container(
                height: 50.r,
                margin: const EdgeInsets.only(top: 10),
                child: SingleChildScrollView(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: md.content
                        .split('\r\n')
                        .map((e) => Text(
                              e,
                              style: TextStyle(
                                color: const Color(0xff666666),
                                fontSize: 15.sp,
                              ),
                            ))
                        .toList(),
                  ),
                ),
              ),
            ],
          ),
        ),
        Positioned(
          bottom: 25.r,
          left: 20.r,
          right: 20.r,
          child: GetBuilder<VersionUpdateViewController>(
            id: 'update',
            builder: (controller) {
              return state.isUpdating
                  ? GetBuilder<VersionUpdateViewController>(
                      id: 'progress',
                      builder: (controller) {
                        var progress = state.received / state.total;

                        return Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Container(
                              margin: const EdgeInsets.symmetric(vertical: 10),
                              child: Text.rich(
                                TextSpan(
                                  text: '更新中，总共${state.totalSize}',
                                  style: TextStyle(
                                    color: const Color(0xff333333),
                                    fontSize: 15.sp,
                                  ),
                                  children: [
                                    TextSpan(
                                        text:
                                            '（${(progress * 100).toStringAsFixed(2)}%）',
                                        style: TextStyle(
                                          color: const Color(0xff1A8DFF),
                                          fontSize: 12.sp,
                                        )),
                                  ],
                                ),
                              ),
                            ),
                            LinearProgressIndicator(
                              value: progress,
                              color: const Color(0xff1A8DFF),
                              backgroundColor: const Color(0xffE5E9ED),
                              minHeight: 6,
                              // borderRadius: BorderRadius.circular(3),
                            ),
                          ],
                        );
                      },
                    )
                  : InkWell(
                      onTap: controller.actionUpdate,
                      child: Container(
                        decoration: BoxDecoration(
                          color: const Color(0xff2299ED),
                          borderRadius: BorderRadius.circular(5),
                        ),
                        alignment: Alignment.center,
                        height: 40.r,
                        child: Text(
                          '立即升级',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 16.sp,
                          ),
                        ),
                      ),
                    );
            },
          ),
        ),
        Visibility(
          visible: controller.state.canCancel,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              InkWell(
                onTap: controller.back,
                child: Container(
                  width: 40.r,
                  height: 40.r,
                  alignment: Alignment.topRight,
                  child: Icon(
                    IconUtil.wrong,
                    color: Colors.white,
                    size: 18.r,
                  ),
                ),
              )
            ],
          ),
        ),
      ],
    );
  }
}
